import React, { Component } from 'react'
import { connect } from 'react-redux'
import DeleteMember from 'graphql/user/deleteMember.graphql'
import QueryMember from 'graphql/user/queryOneMember.graphql'
import UpdateMember from 'graphql/user/updateMember.graphql'
import { ValidType } from 'components/validForm'
import {
  Form as FormTable,
  Section as TableSection,
  Input,
  Submit,
  Switch,
} from 'components/tableForm'
import { global as globalDuck } from 'ducks'
import { push, replace } from 'connected-react-router'

const getVariables = values => ({
  role: values.role ? values.role.value : undefined,
})

class newDataset extends Component {
  componentDidMount = () => {}

  render() {
    const {
      org, match, reLink, link,
    } = this.props
    const orgName = org.owner_object.name
    const { name } = match.params
    const deleteRule = [
      {
        type: ValidType.EQ,
        value: name,
        errorMessage: `应输入: ${name}`,
      },
    ]
    return (
      <FormTable
        initQuery={{
          query: QueryMember,
          variables: { orgName, name },
          tableName: 'org_member',
        }}
      >
        <TableSection header={`编辑成员${name}的信息`}>
          <Switch
            init
            name="role"
            header="选择该成员的角色"
            description="管理员角色拥有组织的全部权限"
            options={[{ name: 'member', value: '普通成员' }, { name: 'admin', value: '管理员' }]}
          />
        </TableSection>
        <Submit
          submit={{
            text: '保存',
            variables: { orgName, name },
            getVariables,
            mutation: UpdateMember,
            success: (data) => {
              link('/empty')
              setTimeout(() => {
                if (data && data.update_org_member) {
                  reLink(`/org/${orgName}/user/members/list`)
                }
              })
            },
          }}
          cancle={{ text: '取消', url: `/org/${orgName}/user/members/list` }}
          validFields={['role']}
          redirect
        />
        <TableSection header="危险操作区" red>
          <Input
            name="deleteName"
            header="删除成员"
            description={`删除该成员同时删除所有为了安全起见请您输入当前要删除的成员名称：${name}`}
            message={{
              header: '删除成员的同时将会删除以下信息',
              list: [
                '将该成员从当前组织所有项目中移除',
                '将该成员从所有子组织中移除',
                '将分配给该成员的所有未完成的任务收回',
              ],
            }}
            rules={deleteRule}
            red
          />
        </TableSection>
        <Submit
          submit={{
            text: '删除',
            variables: { orgName, name },
            getVariables: () => {},
            mutation: DeleteMember,
            success: () => {
              link('/empty')
              setTimeout(() => {
                reLink(`/org/${orgName}/user/members/list`)
              })
            },
          }}
          validFields={['deleteName']}
          red
        />
      </FormTable>
    )
  }
}

const mapStateToProps = state => ({
  user: globalDuck.selectors.user(state),
})

const mapDispatchToProps = {
  link: push,
  reLink: replace,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(newDataset)
